<template>
	<div class="f-tag-list" :style="{left:$store.state.asideWidth}">
		<el-tabs v-model="activeTab" type="card" class="flex-1" @tab-remove="removeTab" style="min-width: 100px;"
			@tab-change="changeTab">
			<el-tab-pane :closable="item.path !='/'" v-for="item in tabList" :key="item.path" :label="item.title"
				:name="item.path">
			</el-tab-pane>
		</el-tabs>

		<span class="tag-btn">
			<el-dropdown @command="handleClose">
				<span class="el-dropdown-link">
					<el-icon>
						<arrow-down />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
						<el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>

					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</span>
		</div>
		<div style="height: 44px;">

		</div>
</template>

<script setup>
	import {
		useTabList
	} from '~/composables/useTabList.js';
	const {
		activeTab,
		tabList,
		changeTab,
		removeTab,
		handleClose
	} = useTabList()
	// import {
	//     ref
	// } from 'vue';
	// import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router';
	// import { useCookies } from "@vueuse/integrations/useCookies"

	// const route = useRoute()
	// const router = useRouter()
	// const cookie = useCookies()

	// const activeTab = ref(route.path);
	// const tabList = ref([
	//     {
	//         title: '后台首页',
	//         path:"/"
	//     }
	// ]);

	// function addTab(tab){
	//     let noTab = tabList.value.findIndex(t=>t.path == tab.path) == -1
	//     if(noTab){
	//         tabList.value.push(tab)
	//     }
	//     cookie.set("tabList",tabList.value)
	// }

	// function initTabList(){
	//     let tbs = cookie.get("tabList")
	//     if(tbs){
	//         tabList.value = tbs
	//     }
	// }

	// onBeforeRouteUpdate((to, from) => {
	//     activeTab.value = to.path
	//     addTab({
	//         title: to.meta.title,
	//         path: to.path
	//     });
	// })

	// const changeTab = (t) => {
	//     activeTab.value = t
	//     router.push(t)
	// }

	// const removeTab = (targetName) => {
	//     const index = tabList.value.findIndex(item => item.path === targetName);
	//     if (index > -1) {
	//         tabList.value.splice(index, 1);
	//         cookie.set("tabList", tabList.value);
	//         if (activeTab.value === targetName) {
	//             if (tabList.value.length > 0) {
	//                 const newActiveTab = tabList.value[tabList.value.length - 1].path;
	//                 activeTab.value = newActiveTab;
	//                 router.push(newActiveTab);
	//             } else {
	//                 router.push('/');
	//             }
	//         }
	//     }
	// };

	// const handleClose = (c)=>{
	// 	if(c == "clearAll"){
	// 		activeTab.value="/"
	// 		tabList.value = [{
	// 			title: '后台首页',
	// 			path:"/"
	// 		}]
	// 	}else if(c == "clearOther"){
	// 		tabList.value = tabList.value.filter(tab=>tab.path == "/" || tab.path == activeTab.value)
	// 	}
	// 	cookie.set("tabList",tabList.value)
	// }
</script>

<style scoped>
	.f-tag-list {
		@apply fixed bg-gray-100 flex items-center px-2;
		top: 64px;
		right: 0;
		height: 55px;
		z-index: 100;
	}

	.tag-btn {
		@apply bg-white rounded ml-auto flex items-center justify-center px-2;
		height: 32px;

	}

	:deep(.el-tabs__header) {
		border: 0 !important;
		@apply mb-0;
	}

	:deep(.el-tabs__nav) {
		border: 0 !important;
	}

	:deep(.el-tabs__item) {
		border: 0 !important;
		height: 32px;
		line-height: 32px;
		@apply bg-white mx-1 rounded;
	}

	:deep(.el-tabs__nav-next),
	:deep(.el-tabs__nav-prev) {
		line-height: 32px;
		height: 32px;
	}

	:deep(.is-disabled) {
		cursor: not-allowed;
		@apply text-gray-300;
	}
</style>